<template>
	<div>
		<div class="QAHead" v-my-directive :data-title="current.name" data-description="学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题">
			<div class="left paddingtop10 columnnav Horizontalspacing minixgap fonfff minfont">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item v-for="(item, index) in nav" :key="index" :to="{ path: '/column/' + item.alias + '.html' }" @click="get()">{{ item.name }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="questionnav line">
				<div class="columnLayout interval">
					<span class="fonfff center QAfont">{{ current.name }}</span>
					<div class="left Horizontalspacing interval fonfff">
						<div class="Horizontalspacing minxgap">
							<div class="iconfont icon-duigouxiao fonfff minfont center"></div>
							<div>学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div>
				<div class="content">
					<div class="Genericpadding newsrow">
						<div class="QAgreybox" @click=";(curPage = 1), actr(current.alias)">{{ $t('message.ALL') }}</div>
						<div class="QAgreybox" v-for="(item, index) in subordinate" :key="index" @click=";(curPage = 1), actr(item.alias)">{{ item.name }}</div>
					</div>
					<div class="columnLayout">
						<div class="Genericpadding QArectangle">
							<div class="Horizontalspacing interval">
								<div class="qzsolld" :class="{ qzsolldav: tesorting == 0 }" @click=";(tosort = 'time'), (curPage = 1), actr(), (offset = offset === 'DESC' ? 'ASC' : 'DESC')">{{ $t('message.latestarticles') }}</div>
								<div class="qzsolld" :class="{ qzsolldav: tesorting == 1 }" @click=";(tosort = 'time'), (curPage = 1), actr(), (offset = offset === 'DESC' ? 'ASC' : 'DESC')">{{ $t('message.SortbyTime') }}</div>
								<div class="qzsolld" :class="{ qzsolldav: tesorting == 2 }" @click=";(tosort = 'popularity'), (curPage = 1), actr(), (offset = offset === 'DESC' ? 'ASC' : 'DESC')">{{ $t('message.sortbypopularity') }}</div>
							</div>
						</div>
						<ul class="columnLayout">
							<router-link v-if="arclist" v-for="(item, index) in arclist" :key="index" :to="'/article/' + item.alias + '/' + item.id">
								<li class="Genericpadding coreslistli navwidth">
									<el-image class="PostThumbnails" :src="item.thumbnail ? item.thumbnail : ''" lazy>
										<template #error>
											<div class="image-slot iconfont icon-jiazaitupian"></div>
										</template>
									</el-image>

									<div class="ArticleList">
										<div class="Horizontalspacing minxgap ArticleTitlep">
											<el-tag effect="plain" size="small">热门</el-tag>
											<span class="turngreen Widthlimit">{{ item.title }}</span>
										</div>
										<span class="minfont grey Widthlimits">{{ item.description }}</span>
										<div class="articlebt minfont">
											<div class="Horizontalspacing interval">
												<div class="Horizontalspacing minixgap">
													<el-avatar class="pimgmins center" :src="item.user.Avatar" :size="60">
														<div class="image-slot iconfont icon-setting-role"></div>
													</el-avatar>

													<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
													<span v-else class="center">{{ item.user.username }}</span>
												</div>
												<div class="courspidname grey center">{{ item.pidname }}</div>
											</div>
											<div class="Horizontalspacing interval grey">
												<div class="Horizontalspacing minixgap">
													<span class="courspidname center">{{ $t('message.DATE') }}</span>
													<span class="center">{{ item.Creationtime }}</span>
												</div>
												<div class="courspidname Horizontalspacing minixgap">
													<span class="center">{{ $t('message.like') }}:</span>
													<span class="center">{{ item.Like.length }}</span>
												</div>
												<div class="courspidname Horizontalspacing minixgap">
													<span class="center">{{ $t('message.View') }}</span>
													<span class="center">{{ item.PageView }}</span>
												</div>
											</div>
										</div>
									</div>
								</li>
							</router-link>
							<div v-else>
								<el-skeleton v-for="index in 10" :key="index" class="Genericpadding coreslistli navwidth" animated>
									<template #template>
										<div>
											<el-skeleton-item variant="image" class="image-slot" />
										</div>
										<div class="ArticleList" style="flex: 1">
											<el-skeleton-item variant="h3" style="width: 100%" />
											<div class="courspidname">
												<el-skeleton-item variant="h3" style="width: 100%" />
												<el-skeleton-item variant="h3" style="width: 100%" />
												<el-skeleton-item variant="h3" style="width: 100%" />
											</div>
											<el-skeleton-item variant="h3" style="width: 100%" />
										</div>
									</template>
								</el-skeleton>
							</div>
							<div class="Genericpadding">
								<el-pagination small background class="paginationcen" :hide-on-single-page="value" @current-change="fun" :current-page="curPage" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
							</div>
						</ul>
					</div>
				</div>
			</div>
			<div class="left">
				<left></left>
			</div>
		</div>
	</div>
</template>
<script>
	import left from './../components/left'
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		components: {
			// 组件
			left,
		},
		data() {
			return {
				comn: this.$route.params.comn.replace(/.html/g, ''),
				arclist: '',
				nav: [],
				current: [],
				subordinate: [],

				qzsolldav: `qzsolldav`,
				tesorting: 0,
				order: false,

				//返回值
				value: true,
				pagesize: 20, //每页显示数量
				curPage: 1, // 当前页数
				total: 0, // 一共几条数据
				offset: 'DESC',
				tosort: 'time',
			}
		},
		methods: {
			//默认 函数
			async get() {
				console.log(this.comn)
				let comn = await api(['Obtainclassification', this.comn])
				this.nav = comn.data

				//获取下级分类
				let comnlist = await api(['Getification', this.comn])

				this.current = comnlist['data'][0]
				this.subordinate = comnlist['data'][1]
				this.actr()
			},
			// 获取文章
			// 如果为空
			async actr(ele = '') {
				this.arclist = ''

				if (ele) {
					this.comn = ele
				}
				let array = await api(['getarticlepage', { perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort, alias: this.comn }])
				console.log(array)
				if (array.code == 200) {
					this.total = array.massage / 1
					array = array.data
					this.arclist = array
					// this.Updatesorting()
				} else {
					this.total = 0
				}
			},
			// 分页
			async fun(ele = 1) {
				window.scrollTo({ behavior: 'instant', top: 400 })
				this.curPage = ele
				await this.actr()
				let arr = []
				for (let i = this.index; i < this.arclist.length; i++) {
					arr.push(this.arclist[i].id)
				}

				api(['acbrowsing', arr])
			},
		},

		mounted() {
			// 生命周期:
			this.get()
		},
		updated() {
			// this.loading = false
		},
	}
</script>
<style scoped>
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 150px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.image-slot {
		font-size: 30px;
	}
	.qzsolldav {
		color: var(--primary-color);
	}
	.Widthlimit {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 560px; /* 设置容器宽度 */
	}
	.Widthlimits {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; /* 设置最大显示行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		width: 597px; /* 设置容器宽度 */
		white-space: normal; /* 允许换行 */
	}
	.newsrow {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
</style>
<style>
	.coreslistli {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
	.paginationcen {
		place-self: end center;
	}
</style>
<style>
	@media screen and (max-width: 860px) {
		.el-carousel__container {
			height: 1.2232rem;
		}
		.ArticleList {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
		}
		.paginationcen {
			place-self: center;
		}
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.indexconta {
			width: 3.35rem;
			height: 1.2232rem;
			position: relative;
			overflow: hidden;
		}
		.adsbox {
			border-radius: 0.04rem;
			width: 3rem;
			height: 1rem;
			background-color: rgba(144, 147, 153, 0.6);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			/* border: 1px solid rgb(255, 255, 255, 0.6); */
		}
		.adsflex {
			height: 1rem;
			gap: 0.2rem;
		}
		.adsflex > :first-child {
			font-size: 0.2rem;
			font-weight: bold;
			text-shadow: 0.02rem 0.02rem 0.02rem rgba(0, 0, 0, 0.5);
		}
		.adsflex > :nth-child(2) {
			color: #f2f6fc;
			font-size: 0.15rem;
			text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.5);
		}
		.navwidth {
			width: 100vw;
		}
		.TopPicture {
			height: 1.625rem;
			width: 1.625rem;
		}
		.TopRectangle {
			width: 1.625rem;
			height: 1.625rem;
			border-radius: 0.04rem;
		}
		.Randomcours {
			display: flex;
			flex-wrap: wrap;
			/* 允许标签自动换行 */
			/* 容器宽度为200px */
			/* justify-content: space-between; */

			gap: 0.1rem;
		}
		.coretitle {
			display: none;
		}
		.image-slot {
			width: 1rem;
			height: 0.75rem;

			font-size: 0.1rem;
		}
		.Widthlimits {
			display: none;
		}
		.courspidname {
			display: none;
		}
		.coreslistli {
			gap: 0.1rem;
		}
		.Widthlimit {
			width: 1.9rem; /* 设置容器宽度 */
		}
		.listtruncate-text {
			width: 3.1rem; /* 设置容器宽度 */
		}
		.newsrow {
			justify-content: space-between;
			gap: 0.1rem;
		}
	}
</style>
